{% if links %}
    <div class="card mb-3">
        <div class="card-header">Links</div>
        <ul class="list-group list-group-flush">
            {% for link in links %}
                <li class="list-group-item  list-group-item-action d-flex justify-content-between align-items-center">
                    <a href="{{ link.url }}" target="_blank">{{ link.name }}</a>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endif %}

{% if categories %}
    <div class="card mb-3">
        <div class="card-header">Categories</div>
        <ul class="list-group list-group-flush">
            {% for category in categories %}
                <li class="list-group-item  list-group-item-action d-flex justify-content-between align-items-center">
                    <a href="{{ url_for('blog.show_category', category_id=category.id) }}">
                        {{ category.name }}
                    </a>
                    <span class="badge badge-primary badge-pill"> {{ category.posts|length }}</span>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endif %}

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Change Theme
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        {% for theme_name, display_name in config.BLUELOG_THEMES.items() %}
            <a class="dropdown-item"
               href="{{ url_for('blog.change_theme', theme_name=theme_name, next=request.full_path) }}">
                {{ display_name }}</a>
        {% endfor %}
    </div>
</div>
